<template>
  <div class="open-platform gateway-common">
    <div class="gateway-common-banner">
      <h4 class="gateway-common-banner-title">产品预览</h4>
    </div>
    <div class="open-platform-content">
      <div class="open-platform-content-product-target">
        <p class="open-platform-content-title">产品实现目标</p>
        <ul class="open-product-target-list">
          <li v-for="(v, index) of ProductTargetList" :key="`${v.title}${index}`">
            <div class="open-product-target-img">
              <img :src="v.imgSrc" alt />
            </div>
            <div class="open-product-target-bottom">
              <p class="open-product-target-subtitle">{{ v.title }}</p>
              <p class="open-product-target-desc">{{ v.desc }}</p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 企业相关/危险名单 -->
      <div class="open-platform-content-firm-roll">
        <img class="open-platform-content-firm-roll2" src="@/assets/img/xiangyun.jpg" alt />
        <img
          class="open-platform-content-firm-roll2"
          src="@/assets/img/xiangyun.jpg"
          alt
        />
      </div>
      <!-- 应用案例 -->
      <div class="open-platform-content-use-case">
        <p class="open-platform-content-title">产品预览</p>
        <ul class="open-content-use-case-module">
          <li
            v-for="(v, index) in useCaseList"
            :key="`${v.title}${index}`"
            :style="`background: url(${v.bg}) no-repeat center;`"
            :class="actived == index ? 'actived' : ''"
            @mouseenter="enter(index)"
          >
            <div class="open-content-module-mask"></div>

            <div class="open-content-module-content">
              <div class="open-content-module-header"></div>
              <img :src="v.imgSrc" class="open-content-module-icon" alt />
              <div class="open-content-module-title">
                <p>{{ v.title }}</p>
              </div>
              <p class="open-content-module-text">{{ v.text }}</p>
              <p class="open-content-module-desc">{{ v.desc }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
// import GatewayFooter from "../components/gateway-footer.vue";
// import RightSide from "@/components/rightSide/index.vue";
export default {
  name: "Openplatform",
//   components: { GatewayFooter, RightSide },
  data() {
    return {
      ProductTargetList: [
        {
          imgSrc: require("@/assets/img/chengshi2.jpg"),
          title: "提供一站式数据服务",
          desc:
            "以接口的形式提供数据服务，补充机构客户数据信息维度缺失，支持各类机构的风控规则、入模。",
        },
        {
          imgSrc: require("@/assets/img/chengshi6.jpg"),
          title: "不断丰富数据积累",
          desc:
            "不断积累业务调用数据，夯实大数据征信的基础，方便数据分析、数据建模，结合场景，服务更多机构客户。",
        },
        {
          imgSrc: require("@/assets/img/chengshi4.jpg"),
          title: "撬动更多行业资源",
          desc:
            "促进各行业数据融合，推动政府部门、社会机构企业个体共享数据，提升公共服务便民服务能力，真正做到”取之于民，用之于民”。",
        },
      ],
      useCaseList: [
        {
          imgSrc: require("@/assets/img/use-case-tradition-icon.png"),
          bg: require("@/assets/img/chengshi3.jpg"),
          title: "传统金融机构",
          text: "银行、保险、券商、信托",
          desc:
            "建设银行、招商银行、中信银行、平安银行、光大银行、微众银行、中信证券、中信建投、国泰君安、招商证券、华泰证券",
        },
        {
          imgSrc: require("@/assets/img/use-case-finance-icon.png"),
          bg: require("@/assets/img/chengshi4.jpg"),
          title: "泛金融",
          text: "互金、支付、小贷、融资、租赁、保理",
          desc:
            "国家电网、中国石化、中国电信、腾讯、京东、美团点评、58同城等。",
        },
        {
          imgSrc: require("@/assets/img/use-case-government-icon.png"),
          bg: require("@/assets/img/chengshi5.jpg"),
          title: "政府相关机构",
          text: "协会、招商局、产业园区",
          desc: "发改委、国家统计局、工商总局、中国人民大学、中国信通院。",
        },
        {
          imgSrc: require("@/assets/img/use-case-else-icon.png"),
          bg: require("@/assets/img/chengshi6.jpg"),
          title: "其他",
          text: "电商平台、金融科技、物流快递、电子签章",
          desc: "更新中",
        },
      ],
      actived: 0,
    };
  },
  created() {
    this.$store.dispatch("app/setGatewayActivedIndex", "1-1-1");
  },
  methods: {
    enter(index) {
      this.actived = index;
    },
  },
};
</script>

<style scoped lang="scss">

.gateway-common {
  min-width: 1200px;
  .gateway-common-banner {
    height: 560px;
    min-width: 1200px;
    background: url("~@/assets/img/nav_img1.jpg") no-repeat
      center;
    text-align: center;
    overflow: hidden;
    margin-top: -52px;
    .gateway-common-banner-title {
      margin-top: 212px;
      font-size: 80px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: black;
    }
    .gateway-common-banner-desc {
      width: 988px;
      font-size: 22px;
      font-weight: 400;
      color: #ececec;
      line-height: 30px;
      margin: 0 auto 0 auto;
    }
  }
  .gateway-common-content {
    padding: 60px 0 0 0;
  }
}
.open-platform {
  .open-platform-content {
    min-width: 1200px;
    .open-platform-content-title {
      text-align: center;
      padding-bottom: 10px;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 45px;
      &::after {
        content: "";
        display: block;
        position: relative;
        width: 64px;
        height: 3px;
        background: #2b99ff;
        left: 50%;
        bottom: -10px;
        transform: translate(-50%, 0%);
      }
    }
    //   产品实现目标
    .open-platform-content-product-target {
      background: #fff;
      padding: 60px 0 95px 0px;
      box-sizing: border-box;
      .open-product-target-list {
        width: 1200px;
        margin: 66px auto 0 auto;
        display: flex;
        justify-content: space-between;
        li {
          width: 380px;
          height: 600px;
          background: #ffffff;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
          border-radius: 3px;
          transition: 0.3s;
          overflow: hidden;
          .open-product-target-img {
            height: 375px;
            width: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .open-product-target-bottom {
            padding: 0 30px;
            box-sizing: border-box;
            .open-product-target-subtitle {
              margin: 40px 0 15px 0;
              text-align: center;
              transition: 0.3s;
              font-size: 20px;
              font-weight: 400;
              color: #666666;
              line-height: 21px;
            }
            .open-product-target-desc {
              transition: 0.3s;
              font-size: 16px;
              color: #999999;
              line-height: 25px;
              text-align: center;
            }
          }
          &:hover {
            box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
            transform: scale(1.03);

            .open-product-target-subtitle {
              color: #2b99ff;
            }
            .open-product-target-desc {
              color: #666666;
            }
          }
        }
      }
    }
    // 企业相关/危险名单
    .open-platform-content-firm-roll {
      width: 1050px;
      background: #fff;
      padding: 0px 0 77px 0px;
      box-sizing: border-box;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .open-platform-content-firm-roll2 {
        position: relative;
        top: 16px;
        width: 477px;
        height: 333px;
      }
    }
    // 应用案例
    .open-platform-content-use-case {
      background: #f7f7f7;
      padding: 100px 0 0px 0px;
      box-sizing: border-box;
      .open-content-use-case-module {
        width: 1200px;
        height: 501px;
        margin: 67px auto 121px auto;
        
        li {
          width: 226px;
          height: 500px;
          float: left;
          text-align: center;
          transition: 0.5s;
          position: relative;
          .open-content-module-mask {
            transition: 0.5s;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.1);
            // opacity: 0;
          }
          .open-content-module-content {
            position: relative;
            z-index: 2;
          }
          .open-content-module-header {
            height: 190px;
            transition: 0.5s;
          }
          .open-content-module-icon {
            height: 62px;
          }
          .open-content-module-title {
            transition: 0.5s;
            margin-top: 29px;
            position: relative;
            padding-bottom: 10px;
            p {
              font-size: 20px;
              color: #ffffff;
              opacity: 0.8;
              transition: 0.5s;
            }
            &::after {
              content: "";
              display: block;
              width: 34px;
              height: 2px;
              background: #d7d9de;
              position: absolute;
              left: 50%;
              bottom: 0%;
              transform: translate(-50%, -50%);
            }
          }
          .open-content-module-text {
            font-size: 16px;
            opacity: 0;
            transition: 0.5s;
            color: #fffefe;
            line-height: 25px;
            margin: 22px 0px 10px 0px;
            text-align: center;
          }
          .open-content-module-desc {
            opacity: 0;
            margin: 0px auto;
            transition: 0.5s;
            width: 287px;
            height: 91px;
            font-size: 16px;
            color: #f2f2f2;
            line-height: 25px;
          }
        }
        li.actived {
          width: 520px;
          //   .open-content-module-mask {
          //     background: rgba(0, 0, 0, 0.5);
          //   }
          .open-content-module-header {
            height: 121px;
            transition: 0.5s;
          }

          .open-content-module-title {
            transition: 0.5s;

            p {
              color: #2b99ff;
            }
            &::after {
              content: "";
              display: block;
              width: 34px;
              height: 2px;
              background: #2b99ff;
              position: absolute;
              left: 50%;
              bottom: 0%;
              transform: translate(-50%, -50%);
            }
          }
          .open-content-module-desc {
            transition: 0.5s;
            opacity: 1;
          }
          .open-content-module-text {
            transition: 0.5s;
            opacity: 1;
          }
        }
      }
    }
  }
}
</style>
